<template>
  <div class="book-info">
    <img :src="book.image" alt="book-cover" class="book-image">
    <div class="book-details">
      <h3 class="book-title">{{ book.title }}</h3>
      <p class="book-price">{{ book.price }}</p>
      <p style="font-size: 5px;">{{ book.info }}</p>
    </div>
    <v-btn depressed text color="#FF9800" @click="openWindow">
      点我看看！
    </v-btn>
  </div>
</template>
  
  <script>
export default {
  name: "book_info",
  props: {
    book: {
      type: Object,
      required: true,
    },
  },
  methods: {
    openWindow() {
      window.open("https://item.jd.com/12987083.html", "_blank");
    },
  },
};
</script>
  
  <style scoped>
.book-info {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
}

.book-image {
  width: 100px;
  height: 150px;
  object-fit: cover;
  margin-right: 10px;
}

.book-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-title {
  font-size: 25px;
  font-weight: bold;
  margin: 0;
}

.book-price {
  font-size: 20px;
  font-weight: bold;
  color: #f60;
  margin: 0;
}
</style>
  